<template>
  <div>


    <div style="background: #f3f3f6;padding:1rem 1rem;text-align: left;">
      <div style="cursor: pointer;display: flex; flex-direction: row;justify-content: space-between" @click="isDisplayBaseInfo = !isDisplayBaseInfo">
        <p style="font-weight: bold" >展厅基本信息<Icon :type="isDisplayBaseInfo?'ios-arrow-down':'ios-arrow-up'" style="color: #757575;margin-left: 0.3rem;margin-bottom: 0.5rem"/></p>
        <div>
          <template v-if="isAppPlatform(baseInfo.platform)">
            <Button type="success" size="small" icon="ios-paper-plane" style="margin-right: 0.3rem"   @click.stop="publishStands()" v-if="isUnPublished">发布</Button>
          </template>
          <template v-else>
            <Button type="info" size="small" icon="md-search" style="margin-right: 0.3rem"   @click.stop="previewStands()" >预览</Button>
            <Button type="success" size="small" icon="ios-paper-plane" style="margin-right: 0.3rem"   @click.stop="publishPage()" v-if="isPreviewed">发布</Button>
          </template>
          <Button type="warning" size="small" icon="md-arrow-down"  style="margin-right: 0.3rem" @click.stop="offlineStands()" v-if="isCommonType && isPublished">下线</Button>
        </div>
      </div>
      <div>
        <div>
          <KeyValueView title="名称" :value="baseInfo.name"></KeyValueView>
          <KeyValueView title="展厅类型" :value="getStandsType"></KeyValueView>
          <KeyValueView title="固定网址" :value="getStandsShortLink">
            <a :href="getStandsShortLink" target="_blank">{{getStandsShortLink}}</a>
          </KeyValueView>
          <KeyValueView title="SEO元数据">{{baseInfo.pageMetaInfos.length>0?'已设置':'无'}}</KeyValueView>
          <template v-if="baseInfo.tags!=null && baseInfo.tags.length>0">
            <KeyValueView title="标签">
              <Tag v-for="(item, index) in baseInfo.tags" :key="index" color="purple">{{item}}</Tag>
            </KeyValueView>
          </template>

        </div>

        <div v-if="isCategoryType || isCommonType" v-show="isDisplayBaseInfo">
          <KeyValueView title="标题" :value="baseInfo.title" v-if="isNotEmpty(baseInfo.title)"></KeyValueView>
          <KeyValueView title="副标题" :value="baseInfo.subtitle" v-if="isNotEmpty(baseInfo.subtitle)"></KeyValueView>
          <KeyValueView title="描述" :value="baseInfo.description" oneline v-if="isNotEmpty(baseInfo.description)"></KeyValueView>
        </div>

        <div v-show="isDisplayBaseInfo">
          <KeyValueView title="分类" :value="getCategoryChain" v-if="isCategoryType"></KeyValueView>
          <KeyValueView title="内部备注" :value="baseInfo.note" oneline v-if="isNotEmpty(baseInfo.note)"></KeyValueView>
          <KeyValueView title="展厅状态" :value="getStandsState"></KeyValueView>
          <KeyValueView title="创建时间" :value="$tiyBJTime(baseInfo.createtime)"></KeyValueView>
          <KeyValueView title="最后更新" :value="$tiyBJTime(baseInfo.lastModifyTime)"></KeyValueView>
          <KeyValueView title="最后发布" :value="$tiyBJTime(baseInfo.lastPublishTime)"></KeyValueView>
          <KeyValueView title="启用SEO" :value="baseInfo.disableSeo?'已禁用':'已启用'"></KeyValueView>
        </div>
      </div>

      <div v-if="baseInfo.hasProductArea" v-show="isDisplayBaseInfo">
        <p style="font-weight: bold;margin: 0.5rem 0; font-size: 13px;">展厅产品区</p>
        <KeyValueView title="标题" :value="baseInfo.collectionTitle" v-if="isNotEmpty(baseInfo.collectionTitle)"></KeyValueView>
        <KeyValueView title="类型" :value="getCollectionType"></KeyValueView>
        <KeyValueView title="搜索关键词" :value="baseInfo.collectionKeyword" v-if="isKeywordType"></KeyValueView>
        <span class="item_key" style="margin-right: 1rem" v-if="isKeywordType && baseInfo.collectionFilters.length > 0">
          过滤条件：
          <Tag v-for="(filter, index) in baseInfo.collectionFilters" :key="index" color="blue">
            {{filter.field}} :
            <template v-if="isPriceFilter(filter.field)">
              {{getPriceValues(filter)}}
            </template>
            <template v-else-if="isSortFilter(filter.field)">
              {{getSortFilterName(filter.value)}}
            </template>
            <template v-else-if="isDateFilter(filter.field)">
              {{getDateRange(filter)}}
            </template>
            <template v-else>
              {{filter.value}}
            </template>
          </Tag>
        </span>
        <KeyValueView title="屏蔽切面" v-if="isKeywordType && baseInfo.collectionReturnFilters.length > 0" :value="returnFilterCnNames"></KeyValueView>
      </div>

      <div v-show="isDisplayBaseInfo">
        <p style="font-weight: bold;margin: 0.5rem 0">展厅SEO元数据</p>
        <div v-for="(item, index) in baseInfo.pageMetaInfos" :key="index" style="margin: 5px 0 5px 0;">
          <KeyValueView :title="getSEOShowName(item.name)+' - '+getPageMetaTerminal(item.terminal)+' '" :value="item.value" oneline></KeyValueView>
        </div>
      </div>

      <div style="background: #f3f3f6; cursor: pointer; text-align: right;">
        <Button size="small" type="info" ghost @click="showModifyModal()" style="margin-right: 0.5rem">编辑基本信息</Button>
        <Button size="small" ghost type="info" @click="showModifySEOModal()" :disabled="baseInfo.disableSeo">编辑SEO元数据</Button>
      </div>
    </div>


    <Tabs type="line" style="margin-top: 20px;" v-model="activeTab">
      <TabPane name="boothList" label="展区列表">
        <Row type="flex" justify="end">
          <RadioGroup type="button" v-model="searchPlatform" class="y_condition" style="max-width: 100rem" @on-change="changeSearchBoothPlatform">
            <Radio :label="0">全部</Radio>
            <Radio v-for="item in boothPlatforms" :label="item.value" :key="item.value">{{item.label}}</Radio>
          </RadioGroup>
          <Select v-model="searchParam.booth.displayType" clearable class="y_condition" @on-change="changeSearchBoothType" placeholder="展区显示类型" transfer>
            <Option v-for="item in boothTypes" :value="item.value" :key="item.value">{{item.label}}</Option>
          </Select>
          <Button type="info" icon="md-add" class="y_condition" @click="showAddBoothModal()">新增展区</Button>
        </Row>
        <!-- 展区列表 -->
        <List border style="margin: 1rem 0rem">
          <div v-if="boothList==null || boothList.length==0">
            <ListItem>
              <div style="width: 100%; text-align: center;">暂无数据</div>
            </ListItem>
          </div>
          <div v-else>
            <ListItem v-for="(item,index) in boothList" :key="item.id">
              <Row style="width: 100%" :gutter="32">
                <Col :xs="24" :sm="10" :md="8" :lg="6">
                  <Img :src="displayImg(item.displayType)" style="max-width: 100%;"></Img>
                </Col>
                <Col :xs="24" :sm="14" :md="16" :lg="18" class-name="item_right" style="padding-bottom: 40px;">
                  <KeyValueView title="展区顺序" :value="'#'+item.sequence" oneline></KeyValueView>
                  <KeyValueView title="展区名称" :value="item.title" oneline></KeyValueView>
                  <KeyValueView title="展区状态" :value="getBoothState(item.state)" oneline></KeyValueView>
                  <div>
                    <KeyValueView title="显示行数" :value="item.rowNumber" v-if="isSlideType(item.displayType)"></KeyValueView>
                  </div>
                  <div v-if="isUnionPlatform(item.platform) || isPcPlatform(item.platform)">
                    <KeyValueView title="PC-每行列数" :value="item.columnPc+'列'" v-if="isTiledType(item.displayType)"></KeyValueView>
                  </div>
                  <div>
                    <KeyValueView title="手机端-每行列数" :value="item.columnMobile+'列'" v-if="isTiledType(item.displayType)"></KeyValueView>
                  </div>
                  <KeyValueView title="内部备注" :value="item.note" v-if="isNotEmpty(item.note)"></KeyValueView>
                  <div style="position: absolute; top: 0; right: 10px;">
                    <Tag :color="getPlatformColor(item.platform)">{{getStandsPlatform(item.platform)}}</Tag>
                    <Tag color="#808695">{{getBoothType(item.displayType)}}</Tag>
                  </div>

                  <div style="position: absolute; bottom: 0px; right: 20px;">
                    <Button size="small" @click="onlineBooth(item)" v-if="boothIsOffline(item.state)" type="success">上架</Button>
                    <Button size="small" @click="offlineBooth(item)" v-if="boothIsOnline(item.state)" type="warning">下架</Button>
                    <Button size="small" @click="showModifyBoothModal(item.id)" style="margin: 0 0.5rem">编辑</Button>
                    <Button size="small" @click="deleteBooth(item.id)">删除</Button>
                  </div>
                </Col>
              </Row>
            </ListItem>
          </div>
        </List>
      </TabPane>
      <TabPane name="productList" label="产品集合" v-if="isCollectionShow" style="min-height: 300px;">
        <Row type="flex" justify="end" :gutter="16" style="margin-bottom: 1rem">
          <Cascader :data="categoryList" @on-change="categorySelected" change-on-select clearable placeholder="产品分类"
                    class="y_condition" style="text-align: left; min-width: 300px;" transfer></Cascader>
          <Input type="text" v-model.trim="searchParam.addedProducts.search" clearable placeholder="产品SKU编号或产品名称"
                 class="y_condition" style="min-width: 200px;"></Input>
          <Select v-model="searchParam.addedProducts.state" class="y_condition" placeholder="产品状态" clearable transfer>
            <Option v-for="item in productStates" :value="item.value" :key="item.value">{{item.label}}</Option>
          </Select>
          <DatePicker type="daterange" :options="datePickerOptions" placement="bottom-end" :editable="false" placeholder="上/下架时间"
                      @on-change="changeTimeParam" class="y_condition" v-model="searchParam.addedProducts.selectedDate" style="max-width: 220px; width: 220px; text-align: left;"></DatePicker>
          <Button type="primary" icon="md-search" class="y_condition" @click="searchAddedProducts()">查询</Button>
          <Button type="primary" icon="md-shuffle" class="y_condition" @click="sortProduct()">产品排序</Button>
          <Button type="info" icon="md-add" class="y_condition" @click="showAddProductsModal()">新增产品</Button>
        </Row>
        <List border style="margin: 1rem 0rem">
          <div v-if="productAddedList==null || productAddedList.length==0">
            <ListItem><div style="width: 100%; text-align: center;">暂无数据</div></ListItem>
          </div>
          <div v-else>
            <ListItem v-for="item in productAddedList" :key="item.id">
              <Row style="width: 100%" :gutter="32">
                <Col :xs="10" :sm="8" :md="6" :lg="4" class-name="item_left" style="text-align: center;">
                  <Img :src="getProductImage(item.product.showImage)" style="max-width: 100%;"></Img>
                </Col>
                <Col :xs="14" :sm="16" :md="18" :lg="20" class-name="item_right" style="padding-bottom: 40px;">
                  <KeyValueView title="序号" :value="'#'+item.sequence" oneline></KeyValueView>
                  <KeyValueView title="产品编号" :value="item.product.code" oneline></KeyValueView>
                  <KeyValueView title="产品名称" :value="item.product.name" oneline></KeyValueView>
                  <KeyValueView title="上/下架时间" :value="$tiyBJTime(item.product.lastmodify)" oneline></KeyValueView>

                  <div style="position: absolute; top: 10px; right: 20px;">
                    <Tag :color="getProductStateColor(item.product.state)">{{getProductState(item.product.state)}}</Tag>
                  </div>

                  <div style="position: absolute; bottom: 0px; right: 20px;">
                    <Button size="small" @click="showModifyProductModal(item)">修改序号</Button>
                    <Button size="small" @click="deleteProduct(item)">删除</Button>
                  </div>
                </Col>
              </Row>
            </ListItem>
          </div>
        </List>
        <div style="text-align: right;">
          <Page :total="productAddedPage.total" :page-size="productAddedPage.pageSize" :current="productAddedPage.pageNum"
                @on-change="changeProductAddedPageNum" @on-page-size-change="changeProductAddedPageSize" :page-size-opts="productAddedPage.options"
                show-sizer show-elevator/>
        </div>
      </TabPane>
    </Tabs>

    <!-- 基本信息编辑弹窗 -->
    <Modal v-model="standsStatus.modalModify.isShow" title="编辑展厅基本信息" :width="700"
           :mask-closable="false">
      <a-stand-form ref="AStandModify" :stands-model="modifyStandsModel" :tag-list="standsTagList"></a-stand-form>
      <div slot="footer">
        <Button @click="hideModifyStandsModal()">取消</Button>
        <Button type="primary" @click="modifyStands()">保存</Button>
      </div>
    </Modal>

    <Modal v-model="standsStatus.modalModifySEO.isShow" title="编辑SEO元数据" :width="700" :mask-closable="false">
      <page-meta-form ref="pageMetaModify" :page-meta-info-list="baseInfo.pageMetaInfos" :target="baseInfo.id" :page-meta-info-type="pageMetaInfoType"></page-meta-form>
      <div slot="footer">
        <Button @click="hideModifySEOModal()">取消</Button>
        <Button type="primary" @click="saveStandsSEO()">保存</Button>
      </div>
    </Modal>

    <Modal
      v-model="modalSort.isShow"
      title="产品排序"
      :loading="modalSort.isLoading"
      :mask-closable="false"
      okText="保存"
      :styles="{top: '30px',width:'70%'}"
      @on-ok="saveSort">
      <div style="margin: 1rem">
        <div style="font-size: 1em;text-align: center"><strong> * 拖动当前行到指定位置便可完成排序</strong></div>
        <row justify="end">
            <Button type="primary" icon="md-shuffle" class="y_condition" :disabled="productAllAddedList.length<=0" @click="randomSort()">随机排序</Button>
            <Button type="primary" class="y_condition" :disabled="productAllAddedList.length<=0" @click="saveSort()">保存</Button>
         </row>
        <Table stripe border :context="this" :columns="sortTableTitles" :data="productAllAddedList"
               :draggable="true" @on-drag-drop="sortSequence"
               class="base_table"
               no-data-text="暂无数据"></Table>
      </div>
    </Modal>

    <!-- 新增展区弹窗 -->
    <Modal v-model="boothStatus.modalAdd.isShow" title="新增展区" :width="1000"
           :mask-closable="false">
      <a-booth-form ref="BoothAdd" :booth-model="addBoothModel" :showroom-platform="baseInfo.platform" :showroom-type="baseInfo.type"></a-booth-form>
      <div slot="footer">
        <Button @click="hideAddBoothModal()">取消</Button>
        <Button type="primary" @click="addBooth()">保存</Button>
      </div>
    </Modal>

    <!-- 编辑展区弹窗 -->
    <Modal v-model="boothStatus.modalModify.isShow" title="编辑展区" :width="1000"
           :mask-closable="false" :footer-hide="true">
      <booth-modify ref="BoothEdit" :booth-id="editBoothParams.id" :showroom-platform="baseInfo.platform" :showroom-type="baseInfo.type" :modify-time="editBoothParams.modifyingTime"></booth-modify>
    </Modal>

    <!-- 新增产品条目 -->
    <Modal v-model="productsStatus.modalAdd.isShow" title="新增产品条目" width="1000" :mask-closable="false">
      <product-selection @query-list="queryProductList"></product-selection>
      <div slot="footer">
        <Button @click="hideAddProductsModal()">取消</Button>
        <Button type="primary" @click="showAddProductSequenceModal()">确定</Button>
      </div>
    </Modal>

    <Modal v-model="productsStatus.modalSequence.isShow" title="产品条目序号" :mask-closable="false">
      <Form ref="addProductSequenceForm" :model="addProductsParam" label-colon :rules="productRules">
        <FormItem label="序号" :label-width="100" prop="sequence">
          <Input type="number" v-model="addProductsParam.sequence" style="width: 300px;"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="hideAddProductSequenceModal()">取消</Button>
        <Button type="primary" @click="addProducts()">确定</Button>
      </div>
    </Modal>

    <!-- 修改产品条目 -->
    <Modal v-model="productsStatus.modalModify.isShow" title="修改产品条目序号" :mask-closable="false">
      <Form ref="modifyProductForm" :model="productModifyParam" label-colon :rules="productRules">
        <FormItem label="序号" :label-width="100" prop="sequence">
          <Input type="number" v-model="productModifyParam.sequence" style="width: 300px;"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="hideModifyProductModal()">取消</Button>
        <Button type="primary" @click="modifyProduct()">确定</Button>
      </div>
    </Modal>

    <Modal v-model="parentStatus.isShow" title="解除展厅关联" :width="800" :mask-closable="false" footer-hide>
      <parent-showroom-list :showroom-id="parentsParam.showroomId" :current-time="parentsParam.currentTime"
                            @okClick="afterRemoveParents" @cancelClick="hideParentsModal"></parent-showroom-list>
    </Modal>

    <Modal v-model="childStatus.isShow" title="解除展厅关联" :width="800" :mask-closable="false" footer-hide>
      <child-showroom-list :ok-text="childStatus.okText" :showroom-id="childrenParam.showroomId" :current-time="childrenParam.currentTime"
                           @okClick="afterRemoveChildren" @cancelClick="hideChildrenModal"></child-showroom-list>
    </Modal>
  </div>
</template>

<script>
import tiyData from "./js/stand/edit_data"
import listData from "./js/stand/list_data";
import commonData from "./js/stand/common_data";
import productData from "./productSelect/js/productData";
import Vue from "vue";

import {
  initStandsInfo,
  resetPageInfo,
  modifyStands,
  queryBoothList,
  afterModifyStandsBaseInfo,
  showAddBoothModal,
  addBooth,
  deleteBooth,
  showModifyBoothModal,
  initBoothListSearchParam,
  showModifyStandsModal,
  initProductAddedListSearchParam,
  queryAddedProductList,
  querySortAddedProductList,
  queryProductList,
  showAddProductsModal,
  addProducts,
  afterAddProducts,
  modifyProduct,
  afterModifyProduct,
  deleteProduct,
  afterDeleteProduct,
  showModifySEOModal,
  saveStandsSEO,
  beforeOfflineStands,
  beforePublishStands,
  beforePreviewStands,
  beforePublishPage,
  previewStands,
  publishPage,
  webSortDoing, onlineBooth, offlineBooth,
} from "./js/stand/edit_funs"
import {
  offlineStands,
  publishStands,
} from "./js/stand/list_funs"

import {createCategoryCascader, createCategoryList, getProductCommonData, isEmpty, isNotEmpty} from "../js/commonUtils";


import AStandForm from "./AStandForm";
import ABoothForm from "./ABoothForm";
import BoothModify from "./BoothModify";
import ProductSelection from "./productSelect/ProductSelection";
import PageMetaForm from "./PageMetaForm/PageMetaForm";
import pageMetaData from "./PageMetaForm/js/pageMetaData";
import KeyValueView from "../widgets/KeyValueView";
import ParentShowroomList from "./parentShowrromList/ParentShowroomList";
import ChildShowroomList from "./childShowroomList/ChildShowroomList";
import {getReturnFilterCnNames} from "./js/stand/collection_funs";

export default {
  props: {
    standsId: {type: String, required: true},
    modifyTime: {type: Number, required: true},
  },
  data(){
    return {
      categoryList: commonData.categoryList,
      isDisplayBaseInfo:false,
      activeTab: "boothList",
      baseInfo: tiyData.tData.baseInfo,
      searchParam: tiyData.tParam.searchParam,
      boothList: tiyData.tData.boothList,
      productAddedList: tiyData.tData.productAddedList,
      productAllAddedList: tiyData.tData.productAllAddedList,
      productAddedPage: tiyData.tPage.productsAddedPage,
      boothTypes: commonData.boothDic.types,
      boothPlatforms: [
        {value: '1', label: "PC(含Mobile) Only"},
        {value: '2', label: "APP Only"},
      ],
      searchPlatform: 0,
      standsStatus: tiyData.tStatus.stands,
      boothStatus: tiyData.tStatus.booth,
      modifyStandsModel: tiyData.tParam.editParam.stands,
      standsTagList: commonData.standsDic.tags,
      pageMetaInfo: tiyData.tParam.editParam.pageMetaInfo,
      addBoothModel: tiyData.tParam.addParam.booth,
      editBoothParams: tiyData.tParam.editParam.booth,
      productStates: productData.tStatus.states,
      productsStatus: tiyData.tStatus.products,
      productModifyParam: tiyData.tParam.editParam.product,
      productRules: commonData.rules.productRules,
      pageMetaTypes: pageMetaData.pageMetaDic.types,
      pageMetaInfoType: pageMetaData.pageMetaDic.showroomType,
      yunPath: this.$store.getters.imgPrefix,
      parentStatus: tiyData.tStatus.modalParents,
      parentsParam: tiyData.tParam.parentsParam,
      childStatus: tiyData.tStatus.modalChildren,
      childrenParam: tiyData.tParam.childrenParam,
      modalSort: tiyData.tStatus.modalSort,
      sortTableTitles:tiyData.sortTableTitles(this),
      addProductsParam: tiyData.tParam.addParam.products,
      datePickerOptions: productData.tStatus.datePickerOptions,
    }
  },
  components: {
    AStandForm, ABoothForm, BoothModify, ProductSelection, PageMetaForm, KeyValueView, ParentShowroomList, ChildShowroomList,
  },
  methods:{
    displayImg(type){
      let element = commonData.boothDic.types.find(element => element.value == type);
      return element?element.img:"";
    },
    getSEOShowName(name) {
      let element = pageMetaData.pageMetaDic.names.find(element => element.value == name);
      return element==null?"":element.label;
    },
    getPageMetaTerminal(terminal) {
      let element = pageMetaData.pageMetaDic.terminals.find(element => element.value == terminal);
      return element==null?"":element.label;
    },

    showModifyModal() {
      listData.tStatus.currentStep = 0;
      showModifyStandsModal(this, tiyData.tData.baseInfo);
    },
    hideModifyStandsModal() {
      tiyData.tStatus.stands.modalModify.isShow = false;
    },
    modifyStands() {
      modifyStands(this, afterModifyStandsBaseInfo);
    },
    showModifySEOModal() {
      showModifySEOModal(this, this.baseInfo);
    },
    hideModifySEOModal() {
      tiyData.tStatus.stands.modalModifySEO.isShow = false;
    },
    saveStandsSEO() {
      saveStandsSEO(this, tiyData.tData.baseInfo.type);
    },
    changeSearchBoothPlatform(platform) {
      tiyData.tParam.searchParam.booth.platforms.splice(0);
      if(platform == 0) {
        tiyData.tParam.searchParam.booth.platforms.push(...[commonData.standsDic.pcPlatform, commonData.standsDic.appPlatform, commonData.standsDic.unionPlatform]);
      }
      if(platform == 1) {
        tiyData.tParam.searchParam.booth.platforms.push(...[commonData.standsDic.pcPlatform, commonData.standsDic.unionPlatform]);
      }
      if(platform == 2) {
        tiyData.tParam.searchParam.booth.platforms.push(...[commonData.standsDic.appPlatform, commonData.standsDic.unionPlatform]);
      }
      queryBoothList(this);
    },
    changeSearchBoothType(type) {
      tiyData.tParam.searchParam.booth.displayType = type;
      queryBoothList(this);
    },
    getBoothType(type) {
      let element = commonData.boothDic.types.find(element => element.value == type);
      return element==null?"":element.label;
    },
    publishStands() {
      beforePublishStands(this, this.standsId, afterModifyStandsBaseInfo);
    },
    previewStands() {
      beforePreviewStands(this, this.baseInfo.type, afterModifyStandsBaseInfo);
    },
    publishPage() {
      beforePublishPage(this, afterModifyStandsBaseInfo);
    },
    offlineStands() {
      beforeOfflineStands(this, this.standsId, afterModifyStandsBaseInfo);
    },
    showAddBoothModal() {
      showAddBoothModal(this);
    },
    hideAddBoothModal() {
      tiyData.tStatus.booth.modalAdd.isShow = false;
    },
    addBooth() {
      addBooth(this);
    },
    deleteBooth(boothId) {
      deleteBooth(this, boothId);
    },
    showModifyBoothModal(boothId) {
      showModifyBoothModal(boothId);
    },
    searchAddedProducts() {
      queryAddedProductList(this);
    },
    categorySelected(value, selectedData) {
      //选择分类后的条件如果改变后要修改productBatchSequenceView方法里的判断条件
      if (0 < selectedData.length) {
        tiyData.tParam.searchParam.addedProducts.categoryId = selectedData[selectedData.length - 1].value;
        tiyData.tParam.searchParam.addedProducts.categoryLevel = selectedData[selectedData.length - 1].level;
      } else {
        tiyData.tParam.searchParam.addedProducts.categoryId = '';
        tiyData.tParam.searchParam.addedProducts.categoryLevel = 1;
      }
    },
    sortProduct(){
      querySortAddedProductList(this);
    },
    saveSort(){
      webSortDoing(this, tiyData);
    },
    sortSequence(index1,index2){
      let preObj = this.productAllAddedList[index1];
      this.productAllAddedList.splice(index1,1);
      this.productAllAddedList.splice(index2,0,preObj);
      this.productAllAddedList.forEach(function(item,index){
        item.sequence=index+1;
      })
    },
    randomSort(){ //产品集合随机排序
      let slef=this;
      let products = Array.from(slef.productAllAddedList);
      for (let i = products.length; i; i--) {
        let j = Math.floor(Math.random() * i);
        [products[i - 1], products[j]] = [products[j], products[i - 1]];
        products[i - 1].sequence=i;
      }
      slef.$ySpliceAll(slef.productAllAddedList);
      products.forEach(function(item) {
        slef.productAllAddedList.push(item);
      });
    },
    showAddProductsModal() {
      showAddProductsModal(this);
    },
    changeProductAddedPageNum(pageNum) {
      tiyData.tPage.productsAddedPage.pageNum = pageNum;
      queryAddedProductList(this);
    },
    changeProductAddedPageSize(pageSize) {
      tiyData.tPage.productsAddedPage.pageSize = pageSize;
      queryAddedProductList(this);
    },
    queryProductList() {
      queryProductList(this);
    },
    getProductImage(showImage) {
      if(showImage == null) {
        return "";
      }
      let imgUrl = "";
      if(showImage.zipImages!=null && showImage.zipImages!='') {
        let zipImages = this.$toJson(showImage.zipImages);
        for(let zipImg of zipImages) {
          if(zipImg.size == "200w") {
            imgUrl = zipImg.imagePath;
            break;
          }
        }
      }

      if(imgUrl == "") {
        imgUrl = showImage.originalImagePath;
      }
      return this.yunPath + imgUrl;
    },
    getProductState(state) {
      let element = productData.tStatus.states.find(element => element.value == state);
      return element==null?"":element.label;
    },
    getProductStateColor(state) {
      switch(state) {
        case productData.tStatus.stateOnline:
          return "#19be6b";
        case productData.tStatus.stateOffline:
          return "#c5c8ce";
        case productData.tStatus.stateDeleted:
          return "#ed4014";
        case productData.tStatus.stateNew:
          return "#2db7f5";
        default:
          return "#2db7f5";
      }
    },
    hideAddProductsModal() {
      tiyData.tStatus.products.modalAdd.isShow = false;
    },
    showAddProductSequenceModal() {
      if(productData.tData.selectedList==null || productData.tData.selectedList.length==0) {
        this.$Message.error("请选择要添加的产品！");
        return;
      }
      tiyData.tParam.addParam.products.sequence = 10000;
      tiyData.tStatus.products.modalSequence.isShow = true;
    },
    hideAddProductSequenceModal() {
      tiyData.tStatus.products.modalSequence.isShow = false;
    },
    addProducts() {
      addProducts(this, afterAddProducts);
    },
    showModifyProductModal(item) {
      this.$refs.modifyProductForm.resetFields();
      tiyData.tParam.editParam.product.collectionId = item.collectionId;
      tiyData.tParam.editParam.product.productId = item.productId;
      tiyData.tParam.editParam.product.sequence = item.sequence;
      tiyData.tStatus.products.modalModify.isShow = true;
    },
    hideModifyProductModal() {
      tiyData.tStatus.products.modalModify.isShow = false;
    },
    modifyProduct() {
      modifyProduct(this, afterModifyProduct);
    },
    deleteProduct(item) {
      deleteProduct(this, item, afterDeleteProduct);
    },
    afterRemoveParents() {
      tiyData.tStatus.modalParents.isShow = false;
      offlineStands(this, tiyData.tParam.parentsParam.showroomId, afterModifyStandsBaseInfo);
    },
    hideParentsModal() {
      tiyData.tStatus.modalParents.isShow = false;
    },
    afterRemoveChildren() {
      tiyData.tStatus.modalChildren.isShow = false;
      if(tiyData.tStatus.modalChildren.type == 1) {
        publishStands(this, tiyData.tParam.childrenParam.showroomId, afterModifyStandsBaseInfo);
      }else if(tiyData.tStatus.modalChildren.type == 2){
        previewStands(this);
      }else if(tiyData.tStatus.modalChildren.type == 3) {
        publishPage(this);
      }
    },
    hideChildrenModal() {
      tiyData.tStatus.modalChildren.isShow = false;
    },
    isUnionPlatform(platform) {
      return platform == commonData.standsDic.unionPlatform;
    },
    isPcPlatform(platform) {
      return platform == commonData.standsDic.pcPlatform;
    },
    isAppPlatform(platform) {
      return platform == commonData.standsDic.appPlatform;
    },
    isBannerType(type) {
      return type == commonData.boothDic.bannerType;
    },
    isSingleType(type) {
      return type == commonData.boothDic.singleType;
    },
    isTiledType(type) {
      return type == commonData.boothDic.tiledType;
    },
    isSlideType(type) {
      return type == commonData.boothDic.slideType;
    },
    widthHeightRatio(width, height) {
      if(width==null || height==null || height==0) {
        return "";
      }
      return (width/height).toFixed(2);
    },
    isNotEmpty(val) {
      return isNotEmpty(val);
    },
    isPriceFilter(field) {
      return isNotEmpty(field) && field.toLowerCase() == "price";
    },
    getPriceValues(filter) {
      let priceValues = [];
      if(isNotEmpty(filter.startValue) && isNotEmpty(filter.endValue)) {
        return "$"+filter.startValue + "~$" + filter.endValue;
      }
      if(isNotEmpty(filter.startValue)) {
        return "> $"+filter.startValue;
      }
      if(isNotEmpty(filter.endValue)) {
        return "< $"+filter.endValue;
      }
      return "";
    },
    isSortFilter(field) {
      return isNotEmpty(field) && field.toLowerCase() == "sortby";
    },
    getSortFilterName(value) {
      switch (parseInt(value)) {
        case 1:
          return "Order By Newest";
        case 2:
          return "Order By Lowest Price";
        case 3:
          return "Order By Highest Price";
      }
      return "";
    },
    isDateFilter(field) {
      return isNotEmpty(field) && field.toLowerCase() == "date";
    },
    getDateRange(filter) {
      if(isNotEmpty(filter.startDate) && isNotEmpty(filter.endDate)) {
        return Vue.prototype.$tiyBJTime(new Date(filter.startDate).getTime(), "yyyy-MM-dd") + "~" + Vue.prototype.$tiyBJTime(new Date(filter.endDate).getTime(), "yyyy-MM-dd");
      }
      if(isNotEmpty(filter.startDate)) {
        return Vue.prototype.$tiyBJTime(new Date(filter.startDate).getTime(), "yyyy-MM-dd") + "以前";
      }
      if(isNotEmpty(filter.endDate)) {
        return Vue.prototype.$tiyBJTime(new Date(filter.endDate).getTime(), "yyyy-MM-dd") + "以后";
      }
      return "";
    },
    getPlatformColor(platform) {
      switch (platform) {
        case commonData.standsDic.pcPlatform:
          return "blue";
        case commonData.standsDic.appPlatform:
          return "#ff9900";
        case commonData.standsDic.unionPlatform:
          return "#ed4014";
      }
    },
    getStandsPlatform(platform) {
      let element = commonData.standsDic.platforms.find(element => element.value == platform);
      return element==null?"":element.label;
    },
    getBoothState(state) {
      let element = commonData.boothDic.states.find(element => state==element.value);
      return element==null?"":element.label;
    },
    onlineBooth(item) {
      onlineBooth(this, item.id);
    },
    offlineBooth(item) {
      offlineBooth(this, item.id);
    },
    boothIsOnline(state) {
      return state == commonData.boothDic.onlineState;
    },
    boothIsOffline(state) {
      return state == commonData.boothDic.offlineState;
    },
    changeTimeParam(dateArr, type) {
      this.searchParam.addedProducts.startTime = dateArr[0];
      this.searchParam.addedProducts.endTime = dateArr[1];
    },
  },
  computed: {
    isUnPublished() {
      return this.baseInfo.state == commonData.standsDic.unPublishedState;
    },
    isPreviewed() {
      return this.baseInfo.publishState == commonData.standsDic.previewedPublishState;
    },
    isPublished() {
      return this.baseInfo.state == commonData.standsDic.publishedState;
    },
    isModified() {
      return this.baseInfo.publishState == commonData.standsDic.modifiedPublishState;
    },
    isCategoryType() {
      return this.baseInfo.type == commonData.standsDic.categoryType;
    },
    isCommonType() {
      return this.baseInfo.type == commonData.standsDic.commonType;
    },
    isCollectionShow() {
      // if(!this.isCategoryType) {
        if(!this.isKeywordType) {
          return this.baseInfo.hasProductArea && isNotEmpty(this.baseInfo.collectionId);
        }
      // }
      return false;
    },
    isKeywordType() {
      return this.baseInfo.collectionType == commonData.collectionDic.keywordType;
    },
    getStandsType() {
      let element = commonData.standsDic.types.find(element => element.value == this.baseInfo.type);
      return element==null?"":element.label;
    },
    getStandsShortLink() {
      if(isEmpty(this.baseInfo.shortLink)) {
        if(this.isIndexPageType) {
          return this.$store.getters.webDomain;
        }else{
          return "";
        }
      }else{
        return this.$store.getters.webDomain + this.baseInfo.shortLink;
      }
    },
    isIndexPageType() {
      return this.baseInfo.type == commonData.standsDic.indexPageType;
    },
    getCategoryChain() {
      let catNames = this.baseInfo.categoryList.map(cat => {return cat.name});
      return catNames.join("/");
    },
    getStandsState() {
      let element = commonData.standsDic.states.find(element => element.value == this.baseInfo.state);
      return element==null?"":element.label;
    },
    getStandsTags() {
      if(this.baseInfo.tags==null || this.baseInfo.tags=="") {
        return "";
      }
      return this.$toJson(this.baseInfo.tags).join(",");
    },
    getCollectionType() {
      let element = commonData.collectionDic.types.find(element => element.value == this.baseInfo.collectionType);
      return element==null?"":element.label;
    },
    returnFilterCnNames() {
      return getReturnFilterCnNames(this.baseInfo.collectionReturnFilters);
    },
  },
  watch: {
    modifyTime() {
      resetPageInfo(this);
      initBoothListSearchParam();
      initProductAddedListSearchParam();
      initStandsInfo(this, this.standsId,true, true);
    }
  },
  mounted() {
    if(commonData.categoryList.length == 0) {
      let types = [];
      types.push(3);//查询产品分类
      getProductCommonData(this, commonData.categoryList, types, true, createCategoryCascader);
    }
  }
}
</script>

<style lang="less" scoped>
@import  (once,optional)  "../css/base.less";

.item_key{
  color: @tiyTextLightColor;
  padding: 0.3rem 0;
}


.item_left{

}

.item_right{
  border-left: solid 1px @tiyBorderColor;
  text-align: left;
  .flex-colum-wrap;
}

</style>
